<template>
  <div class="user-card">
    <div class="avatar" @click="handHome">
      <img class="avatar-img" :src="userInfo.avatar" alt="" />
      <div class="auth auth-active">
        <img src="@/assets/icon/user/auth-a.png" alt="" />
      </div>
    </div>
    <div class="username">{{ userInfo.nickname }}</div>
    <div class="ids">ID：{{ userInfo.id }}</div>
    <div class="desc" @click="handHome">个人主页</div>
    <div class="user-type flex align-center">
      <span>{{ userInfo.user_type === 'VIP' ? 'VIP用户' : '普通用户' }}</span>
      <div v-if="userInfo.user_type === 'COMMENT'" class="tag" @click="handVip">
        升级VIP
      </div>
      <div v-else class="tag" @click="handVip">续费</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useAppsStore } from '@/stores/modules/app'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const useStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(useStore)

const vipRef = ref()
const handVip = () => {
  vipRef.value.open()
}
const router: any = useRouter()

const handHome = () => {
  router.push({
    path: '/userPage',
    query: {
      id: userInfo.value.id
    }
  })
}
</script>

<style scoped lang="scss">
.user-card {
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  .avatar {
    width: 82px;
    height: 82px;
    position: relative;
    .avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .auth {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 30px;
      height: 30px;
      background: #e3e3e3;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      &-active {
        background: #ffedec;
      }
      img {
        width: 22px;
        height: 22px;
      }
    }
  }
  .username {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
  }
  .ids {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
  }
  .desc {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
  }
  .user-type {
    margin-top: 21px;
    span {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
    }
    .tag {
      margin-left: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      padding: 0 5px;
      background: #ffa51b;
      border-radius: 2px;
      cursor: pointer;
    }
  }
}
</style>
